<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<!DOCTYPE html>
<html>

<head>
  <title>我的宠物</title>
</head>

<body>
<div class="myaccount">
  <div class="row">
    <div class="ucenter">
      <div class="ucenter-info mt10">
        <div class="info-title">
          <h5 style="display: inline-block;margin-left: 35%;">我的宠物</h5>
          <%--<a href="${path}/addPet" >--%>
            <button id="add_pet" class="BUTTON" style="float: right;width: 80px;">添加宠物</button>
            <%--<button class="BUTTON" id="dropout" style="height: 30px;margin-left: 8%;">注销账户</button>--%>
            <%--</a>--%>
        </div>
        <div class="info" >
          <%--展示宠物信息--%>
          <div id="test"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<%--添加宠物部分--%>
<div class="modal fade" id="add_Pet" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="margin-top: 3%;border: none;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">添加我的宠物</h4>
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="padding-left: 5%;">
                <div class="row form-group">
                    <div class="col-md-12">
                        <label class="label_add" for="name">宠物名</label>
                        <input type="text" class="form-control" id="name" placeholder="请输入宠物名" autocomplete="off">
                    </div>
                </div>
                <div class="row form-group">
                <div class="col-md-12">
                    <label class="label_add" for="species">品种</label>
                    <input type="text" class="form-control" id="species" placeholder="请输入宠物品种" autocomplete="off">
                </div>
            </div>
                <div class="form-group ">
                    <div class="myrow">
                        <div class='input-group date' style="width: 14em;" id='datetimepicker1'>
                            <label class="label_add" for="birthday">出生日期</label>
                            <input type="text" placeholder="请选择日期" id="birthday" style="width: 190%;">
                        </div>
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12">
                        <label class="label_add" for="1lisence">许可证号</label>
                        <input type="text" class="form-control" id="1lisence" placeholder="请输入许可号" autocomplete="off" oninput = "value=value.replace(/[^\d]/g,'')">
                        <div id="lisence1" style="color: #FD3F31;display: none;margin-top: 2%;margin-bottom: -3%;">只能输入长度为10的数字，请重新输入</div>
                        <div id="lisence2" style="color: #43C608;display: none;margin-top: 2%;margin-bottom: -3%;">许可证号合格</div>
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12">
                        <label class="label_add" for="immune">免疫证号</label>
                        <input type="text" class="form-control" id="immune" placeholder="请输入免疫证号" autocomplete="off" oninput = "value=value.replace(/[^\d]/g,'')">
                        <div id="immune1" style="color: #FD3F31;display: none;margin-top: 2%;margin-bottom: -3%;">只能输入长度为6的数字，请重新输入</div>
                        <div id="immune2" style="color: #43C608;display: none;margin-top: 2%;margin-bottom: -3%;">免疫证号合格</div>
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12">
                        <label class="label_add" for="color">颜色</label>
                        <select class="form-control" id="color" style="height:48px;">
                            <option>黑色</option>
                            <option>黄色</option>
                            <option>白色</option>
                            <option>棕色</option>
                            <option>花色</option>
                        </select>
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12" style="margin-bottom: 0px; margin-top: 0px;">
                        <label class="label_add">性别</label>
                        <input type="radio" name="1sex" id="sex1" value="女性">母
                        <input type="radio" name="1sex" id="sex2" value="男性">公
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12" style="margin-bottom: -11px;margin-top: -13px;">
                        <label class="label_add">节育</label>
                        <input type="radio" name="1birthControl" id="birthControl1" value="是">是
                        <input type="radio" name="1birthControl" id="birthControl2" value="否">否
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12">
                        <label class="label_add" for="chip">芯片号</label>
                        <input type="text" class="form-control" id="chip" placeholder="请输入芯片号" autocomplete="off" oninput = "value=value.replace(/[^\d]/g,'')">
                        <div id="chip1" style="color: #FD3F31;display: none;margin-top: 2%;margin-bottom: -3%;">只能输入长度为13的数字，请重新输入</div>
                        <div id="chip2" style="color: #43C608;display: none;margin-top: 2%;margin-bottom: -3%;">芯片号合格</div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <button type="button" class="btn btn-default BUTTON" data-dismiss="modal" style="float: right;margin-left: 5%;">关闭</button>
                        <input id="savePet" type="button" class="btn btn-primary BUTTON" value="保存" style="float: right;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<%--修改宠物部分--%>
<div class="modal fade" id="modify_Pet" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="margin-top: 3%;border: none;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">修改我的宠物</h4>
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="padding-left: 5%;">
                <div class="row form-group">
                    <div class="col-md-12">
                        <label class="label_add" for="m_name">宠物名</label>
                        <input type="text" class="form-control" id="m_name" placeholder="请输入宠物名" autocomplete="off">
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12">
                        <label class="label_add" for="m_species">品种</label>
                        <input type="text" class="form-control" id="m_species" placeholder="请输入宠物品种" autocomplete="off">
                    </div>
                </div>
                <div class="form-group ">
                    <div class="myrow">
                        <div class='input-group date' style="width: 14em;" id='datetimepicker2'>
                            <label class="label_add" for="m_birthday">出生日期</label>
                            <input type="text" placeholder="请选择日期" id="m_birthday" style="width: 190%;">
                        </div>
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12">
                        <label class="label_add" for="m_lisence">许可证号</label>
                        <input type="text" class="form-control" id="m_lisence" placeholder="请输入许可号" autocomplete="off" oninput = "value=value.replace(/[^\d]/g,'')">
                        <div id="m_lisence1" style="color: #FD3F31;display: none;margin-top: 2%;margin-bottom: -3%;">只能输入长度为10的数字，请重新输入</div>
                        <div id="m_lisence2" style="color: #43C608;display: none;margin-top: 2%;margin-bottom: -3%;">许可证号合格</div>
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12">
                        <label class="label_add" for="m_immune">免疫证号</label>
                        <input type="text" class="form-control" id="m_immune" placeholder="请输入免疫证号" autocomplete="off" oninput = "value=value.replace(/[^\d]/g,'')">
                        <div id="m_immune1" style="color: #FD3F31;display: none;margin-top: 2%;margin-bottom: -3%;">只能输入长度为6的数字，请重新输入</div>
                        <div id="m_immune2" style="color: #43C608;display: none;margin-top: 2%;margin-bottom: -3%;">免疫证号合格</div>
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12">
                        <label class="label_add" for="m_color">颜色</label>
                        <select class="form-control" id="m_color" style="height:48px;">
                            <option>黑色</option>
                            <option>黄色</option>
                            <option>白色</option>
                            <option>棕色</option>
                            <option>花色</option>
                        </select>
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12" style="margin-bottom: 0px; margin-top: 0px;">
                        <label class="label_add">性别</label>
                        <input type="radio" name="sex" id="m_sex1" value="女性">母
                        <input type="radio" name="sex" id="m_sex2" value="男性">公
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12" style="margin-bottom: -11px;margin-top: -13px;">
                        <label class="label_add">节育</label>
                        <input type="radio" name="birthControl" id="m_birthControl1" value="是">是
                        <input type="radio" name="birthControl" id="m_birthControl2" value="否">否
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12">
                        <label class="label_add" for="m_chip">芯片号</label>
                        <input type="text" class="form-control" id="m_chip" placeholder="请输入芯片号" autocomplete="off" oninput = "value=value.replace(/[^\d]/g,'')">
                        <div id="m_chip1" style="color: #FD3F31;display: none;margin-top: 2%;margin-bottom: -3%;">只能输入长度为13的数字，请重新输入</div>
                        <div id="m_chip2" style="color: #43C608;display: none;margin-top: 2%;margin-bottom: -3%;">芯片号合格</div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <button type="button" class="btn btn-default BUTTON" data-dismiss="modal" style="float: right;margin-left: 5%;">关闭</button>
                        <input id="m_savePet" type="button" class="btn btn-primary BUTTON" value="提交" style="float: right;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>


<script>
    //时间戳转换为时间
    function timestampToTime(timestamp) {
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';
        var m = date.getMinutes() + ':';
        var s = date.getSeconds();
        return Y+M+D;
    }

  $(function(){
    var user="<%=session.getAttribute("user")%>";
    var uid = ${user.id};
    var petID="";


      $('#birthday').datepicker({
          changeMonth: true, //显示月份下拉框
          changeYear: true, //显示年份下拉框
          dateFormat: 'yy-mm-dd' //设置日期显示格式为2017-12-09这种的，也可以选择其他的，比如“d M, y”格式的
      });

      $('#m_birthday').datepicker({
          changeMonth: true, //显示月份下拉框
          changeYear: true, //显示年份下拉框
          dateFormat: 'yy-mm-dd' //设置日期显示格式为2017-12-09这种的，也可以选择其他的，比如“d M, y”格式的
      });

      //许可证号只能是数字
      $("#1lisence").blur(function() {
          var lisence = $.trim($("#1lisence").val());
          if (Number(lisence.value) == "NaN" || lisence.length != 10) {  //当输入不是数字的时候，Number后返回的值是NaN;然后用isNaN判断。
              console.log(Number(lisence.value));
              $('#lisence1').show();
              $('#lisence2').hide();
          } else {
              $('#lisence2').show();
              $('#lisence1').hide();
          }
      });

      //免疫证号判断
      $("#immune").blur(function() {
          var immune = $.trim($("#immune").val());
          if (Number(immune.value) == "NaN" || immune.length != 6) {  //当输入不是数字的时候，Number后返回的值是NaN;然后用isNaN判断。
              $('#immune1').show();
              $('#immune2').hide();
          } else {
              $('#immune2').show();
              $('#immune1').hide();
          }
      });

      //芯片号判断
      $("#chip").blur(function() {
          var chip = $.trim($("#chip").val());
          if (Number(chip.value) == "NaN" || chip.length != 13) {  //当输入不是数字的时候，Number后返回的值是NaN;然后用isNaN判断。
              $('#chip1').show();
              $('#chip2').hide();
          } else {
              $('#chip2').show();
              $('#chip1').hide();
          }
      });

      $("#add_pet").click(function() {
          $('#add_Pet').modal("show");
      });

      //修改我的宠物
      $("#m_savePet").click(function() {
          var name = $.trim($("#m_name").val());
          var species = $.trim($("#m_species").val());
          var birthday = $.trim($("#m_birthday").val());
          var lisence = $.trim($("#m_lisence").val());
          var immune = $.trim($("#m_immune").val());
          var chip = $.trim($("#m_chip").val());
          var color = $.trim($("#m_color").val());
          var sex = $.trim($("input[name='sex']:checked").val());
          var birthControl = $.trim($("input[name='birthControl']:checked").val());

          $.ajax({
              type: 'POST',
              url: '/pet/updatePet',
              dataType: "json",
              data: {id:petID,name:name,species:species,birthday:birthday,lisence:lisence,immune:immune,color:color,sex:sex,birthControl:birthControl,chip:chip,remark:""},
              error: function () {
                  console.log("失败");
              },
              success: function (result) {
                  console.log(result);    //后端返回回应
                  alert('修改成功！');
                  $('#modify_Pet').modal("hide");
                  $('#mypet').load('${path}/mypet');
              }
          });
      });


      //添加“我的宠物”
      $("#savePet").click(function() {
          var name = $.trim($("#name").val());
          var species = $.trim($("#species").val());
          var birthday = $.trim($("#birthday").val());
          var lisence = $.trim($("#1lisence").val());
          var immune = $.trim($("#immune").val());
          var chip = $.trim($("#chip").val());
          var color = $.trim($("#color").val());
          var sex = $.trim($("input[name='1sex']:checked").val());
          var birthControl = $.trim($("input[name='1birthControl']:checked").val());

          $.ajax({
              type: 'POST',
              url: '/pet/insertPet',
              dataType: "json",
              data: {name:name,species:species,birthday:birthday,lisence:lisence,immune:immune,color:color,sex:sex,birthControl:birthControl,chip:chip,remark:""},
              error: function () {
                  alert("失败1");
              },
              success: function (data) {
                  alert('添加成功！');
                  $('#add_Pet').modal("hide");
                  $('#mypet').load('${path}/mypet');
              }
          });
      });

    //根据用户id获取所有宠物
    $.ajax({
      type: 'POST',
      url: '/pet/selectPets',
      dataType: "json",
      data: {},
      error: function () {
        console.log("失败2");
      },
      success: function (result) {
        var str = "";
        for (var key in result) {
          str +='<div class="info-main" style="margin-left: 10%; margin-bottom: 20px;border-bottom: 1px solid #ebebeb;">';
          str +='<div class="row">';
          str +='  <label>宠物名：</label>'+ result[key].name +'';
          str +='  <button class="modifyPet add_petInfo BUTTON" id="'+ result[key].id +'" style="margin-left: 30px;height: 30px;">修改宠物资料</button>';
          str +='  <button class="delete BUTTON" id="'+ result[key].id +'" style="height:30px;">删除宠物</button>';
          str +='</div>';
          str +='<div class="row">';
          str +='  <label>宠物ID：</label><p id="id">'+ result[key].id +'</p>';
          str +='</div>';
          str +='<div class="row">';
          str +='  <label>物种：</label>'+ result[key].species +'</div>';
          str +='<div class="row">';
          str +='  <label>生日：</label>'+ result[key].birthday +'</div>';
          str +='<div class="row">';
          str +='  <label>宠物号码：</label>'+ result[key].lisence +'</div>';
          str +='</div>';
        }
        $('#test').html(str);
        //根据宠物id，删除宠物信息
        $("#test .delete").click(function() {
            petID = $(this).attr('id');   //获设置选中的宠物
            $.ajax({
              type: 'POST',
              url: '/pet/deletePet',
              dataType: "json",
              data: {id:petID},
              error: function () {
                alert("失败3");
              },
              success: function (data) {
                console.log(result);
                alert("已删除该宠物信息");
                  $('#mypet').load('${path}/mypet');
              }
            });
        });
          //修改宠物信息
          $("#test .add_petInfo").click(function() {
              petID = $(this).attr('id');   //获设置选中的宠物
              $.ajax({
                  type: 'POST',
                  url: '/pet/selectPet',
                  dataType: "json",
                  data: {id:petID} ,
                  error: function () {
                      alert("失败4");
                  },
                  success: function (result) {
                      console.log(result);
                      var sex = result.sex;
                      var birthControl = result.birthControl;
                      if(sex == "男性") {
                          console.log(sex);
                          $("#m_sex2").attr("checked","checked");
                      } else if(sex == "女性") {
                          $("#m_sex1").attr("checked","checked");
                      }
                      if(birthControl == "是") {
                          console.log(birthControl);
                          $("#m_birthControl2").attr("checked","checked");
                      } else if(birthControl == "否") {
                          console.log("否");
                          $("#m_birthControl1").attr("checked","checked");
                      }
                      $("#m_name").val(result.name);
                      $("#m_lisence").val(result.lisence);
                      $("#m_immune").val(result.immune);
                      $("#m_chip").val(result.chip);
                      $("#m_birthday").val(timestampToTime(result.birthday));
                      $("#m_species").val(result.species);

                      $('#modify_Pet').modal("show");
                  }
              });
          });
      }
    });
      //许可证号只能是数字
      $("#m_lisence").blur(function() {
          var lisence = $.trim($("#m_lisence").val());
          if (Number(lisence.value) == "NaN" || lisence.length != 10) {  //当输入不是数字的时候，Number后返回的值是NaN;然后用isNaN判断。
              console.log(Number(lisence.value));
              $('#m_lisence1').show();
              $('#m_lisence2').hide();
          } else {
              $('#m_lisence2').show();
              $('#m_lisence1').hide();
          }
      });

      //免疫证号判断
      $("#m_immune").blur(function() {
          var immune = $.trim($("#m_immune").val());
          if (Number(immune.value) == "NaN" || immune.length != 6) {  //当输入不是数字的时候，Number后返回的值是NaN;然后用isNaN判断。
              $('#m_immune1').show();
              $('#m_immune2').hide();
          } else {
              $('#m_immune2').show();
              $('#m_immune1').hide();
          }
      });

      //芯片号判断
      $("#m_chip").blur(function() {
          var chip = $.trim($("#m_chip").val());
          if (Number(chip.value) == "NaN" || chip.length != 13) {  //当输入不是数字的时候，Number后返回的值是NaN;然后用isNaN判断。
              $('#m_chip1').show();
              $('#m_chip2').hide();
          } else {
              $('#m_chip2').show();
              $('#m_chip1').hide();
          }
      });
  });
</script>
<style>
    .BUTTON {
        background: #3D608F;
        color: #FFFFFF !important;
        border: 1px solid #3D608F;
        border-radius: 15px;
    }
    .regist{
        margin-top: -8em
    }
    #gtco-header .mt-text {
        margin-top: 5em;
        margin-bottom: 3em;
    }
    .row-mt-15em {
        margin-top: 22em;
    }
    /*label {*/

    /*}*/
    .form-control {
        box-shadow: none;
        background: transparent;
        border: 2px solid rgba(0, 0, 0, 0.1);
        height: 46px;
        font-size: 16px;
        font-weight: 300;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: -10px;
    }
    .form-group {
        margin-bottom: 15px;
    }


    .regist {
        margin-top: -18em;
    }
    @media screen and (max-width: 768px){
        #gtco-header .mt-text {
            margin-top: 7em;
            margin-bottom: 3em;
            display: none;
        }
    }
    .row-mt-15em {
        margin-top: 20em;
    }

    #birthday {
        height: 46px;
        font-size: 16px;
        font-weight: 300;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: -10px;
        border: 2px solid rgba(0, 0, 0, 0.1);
    }
    .label_add{
        font-size: 1rem;
        font-weight: normal;
        display: inline-block;
        max-width: 100%;
        margin-bottom: -1px;
        /*font-weight: bold;*/
    }
    #m_birthday {
        box-shadow: none;
        background: transparent;
        border: 2px solid rgba(0, 0, 0, 0.1);
        height: 46px;
        font-size: 16px;
        font-weight: 300;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: -10px;
    }
</style>

</html>
